<template>
    <div class="my-address-container">
        <div class="address-list-content">
            <div class="address-list" v-if="addressList.length">
                <div class="address-item" v-for="(item, index) in addressList" :key="item.id"
                    @click="SelectAddress(item)">
                    <div class="info1">
                        <div class="name">{{ item.linkman }}</div>
                        <div class="phone">{{ item.phone }}</div>
                    </div>
                    <div class="info2">
                        {{ item.provinceName }} {{ item.cityName }} {{ item.areaName }} {{ item.address }}
                    </div>
                    <div class="info3">
                        <div></div>
                        <div class="right">
                            <nut-button type="primary" color="linear-gradient(to right, #5232B7,#7237BC)" size="small"
                                @click="SkipEditAddress(item)">编辑</nut-button>
                            <div style="width: 10px;"></div>
                            <nut-button type="default" size="small" @click="deleteAddress(item)">删除</nut-button>
                        </div>
                    </div>
                    <div style="border-bottom: 1px solid #f7f8f9;padding: 15px 0;"></div>
                    <div class="info4">
                        <nut-checkbox v-model="item.defaultState" @change="defaultStateChange(item, $event)">
                            设为默认收货地址
                        </nut-checkbox>
                        <nut-checkbox v-model="item.defaultRefundState"
                            @change="defaultRefundStateChange(item, $event)">
                            设为默认退货地址
                        </nut-checkbox>
                    </div>
                </div>
            </div>
            <nut-empty v-if="!addressList.length" size="large" description="无地址数据"></nut-empty>
        </div>
        <div class="footer-box">
            <nut-button size="normal" block color="linear-gradient(to right, #5232B7,#7237BC)" type="primary"
                @click="Taro.navigateTo({ url: '/pages/add-address/index' })">新增收货地址</nut-button>
        </div>

    </div>
</template>
<script setup>
import Taro from '@tarojs/taro'
import { ref, reactive, onMounted } from 'vue'
import * as addressApi from '../../api/address'
import { useLocationStore } from '../../store'
import { storeToRefs } from "pinia";
const locationStore = useLocationStore();
const addressList = ref([])
const defaultState = ref(false)
const defaultRefundState = ref(false)
const router = Taro.useRouter()
const slected = ref(0)

onMounted(() => {
    slected.value = router.params.slected
    getAddressList()
})
// 选择地址
const SelectAddress = (item) => {
    if (slected.value == 1) {
        locationStore.setAddressInfo(item);
        Taro.navigateBack()
    }



}
//改变状
const defaultStateChange = async (item, value) => {
    console.log(item, value);
    if (value) {
        try {
            const { data, state, message } = await addressApi.updatedStatus({ defaultAddressId: item.id })
            if (state == 200) {
                Taro.showToast({
                    title: "修改成功",
                    icon: 'none'
                })
                getAddressList()
                locationStore.setAddressInfo(item);

            } else {
                Taro.showToast({
                    title: message,
                    icon: 'none'
                })
            }
        } catch (error) {
            Taro.showToast({
                title: "操作失败",
                icon: 'none'
            })
        }
    }
}
const SkipEditAddress = (item) => {
    Taro.navigateTo({ url: `/pages/add-address/index?id=${item.id}` })
}
// 删除地址
const deleteAddress = async (item) => {
    try {
        const { data, state, message } = await addressApi.RemoveAddress({ addressId: item.id })
        if (state == 200) {
            Taro.showToast({
                title: "删除成功",
                icon: 'success'
            })
            getAddressList()

        } else {
            Taro.showToast({
                title: message,
                icon: 'none'
            })
        }
    } catch (error) {
        Taro.showToast({
            title: "操作失败",
            icon: 'none'
        })
    }
}
//改变状态
const defaultRefundStateChange = async (item, value) => {
    console.log(item, value);
    if (value) {
        try {
            const { data, state, message } = await addressApi.updatedStatus({ defaultRefundAddressId: item.id })
            if (state == 200) {
                Taro.showToast({
                    title: "修改成功",
                    icon: 'none'
                })


                getAddressList()
            } else {
                Taro.showToast({
                    title: message,
                    icon: 'none'
                })
            }
        } catch (error) {
            Taro.showToast({
                title: "操作失败",
                icon: 'none'
            })
        }
    }
}
//获取当前用户的地址列表
const getAddressList = async () => {
    try {
        const { data, state, message } = await addressApi.GetAddresses()
        if (state === 200) {
            console.log(data)
            addressList.value = data.map(item => {
                return {
                    ...item,
                    defaultState: item.defaultState === 1 ? true : false,
                    defaultRefundState: item.defaultRefundState === 1 ? true : false
                }
            })
        } else {
            Taro.showToast({
                title: message,
                icon: 'none'
            })
        }
    } catch (error) {
        Taro.showToast({
            title: "获取地址列表失败",
            icon: 'none'
        })
    }
}

</script>
<style lang="less">
.nut-checkbox__icon {
    color: #5232B7 !important;
}

.my-address-container {
    height: 100vh;

    .footer-box {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    }

    .address-list-content {
        padding: 20px;
        box-sizing: border-box;
        height: calc(100vh - 100px);
        overflow-y: auto;

        .address-list {
            .address-item {
                padding: 20px;
                background-color: #fff;
                border-radius: 12px;

                .info1 {
                    display: flex;
                    align-items: center;
                    font-weight: 700;
                    font-size: 30px;

                    .name {}

                    .phone {
                        margin-left: 30px;
                    }
                }

                .info2 {
                    margin-top: 10px;
                    font-size: 26px;
                    color: #858a99;
                }

                .info3 {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 10px;

                    .right {
                        display: flex;
                        align-items: center;
                    }


                }

                .info4 {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 10px;
                }
            }

            .address-item:nth-child(n+2) {
                margin-top: 15px;
            }
        }

    }

}
</style>